<template>
  <view class="section">
    <view class="section-header">
      <text class="section-title">精选照片</text>
      <text class="more" @click="onMoreClick">查看更多 ></text>
    </view>
    <scroll-view class="featured-photos" scroll-x="true">
      <view class="photo-item" v-for="(photo, index) in photos" :key="index" @click="onPhotoClick(photo, index)">
        <image :src="photo.url" mode="aspectFill"></image>
        <text class="photo-date">{{photo.date}}</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  name: 'FeaturedPhotos',
  props: {
    photos: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    onMoreClick() {
      this.$emit('more');
    },
    onPhotoClick(photo, index) {
      this.$emit('select', photo, index);
    }
  }
}
</script>

<style>
.section {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.more {
  font-size: 24rpx;
  color: #3a8838;
}

/* 精选照片样式 */
.featured-photos {
  white-space: nowrap;
}

.photo-item {
  display: inline-block;
  margin-right: 20rpx;
  position: relative;
  width: 280rpx;
  height: 380rpx;
  border-radius: 10rpx;
  overflow: hidden;
}

.photo-item image {
  width: 100%;
  height: 100%;
}

.photo-date {
  position: absolute;
  bottom: 10rpx;
  left: 10rpx;
  color: #fff;
  font-size: 22rpx;
  background-color: rgba(0, 0, 0, 0.3);
  padding: 4rpx 10rpx;
  border-radius: 10rpx;
}
</style> 